<template>
  <!-- 支付页面 -->
  <div class="pay">
    <!-- 头部 -->
    <div class="header">
      <div class="left" @click="router.back()">
        <img src="/images/cart/back.png" />
      </div>
      <div class="title">{{ $t("pay.title") }}</div>
    </div>
    <!-- 价格 -->
    <div class="price">
      eCNY <span>{{ amount }}</span>
    </div>
    <!-- 商品信息 -->
    <div class="product-information">
      <!-- 商品名 -->
      <div class="name">{{ tradeName }}</div>
      <!-- from地址 -->
      <div class="from">
        <div class="title-from">{{ $t("pay.from") }}</div>
        <!-- 地址 -->
        <div class="text-from">{{ Separate }}</div>
      </div>
      <!-- to地址 -->
      <div class="to">
        <div class="title-to">{{ $t("pay.to") }}</div>
        <div class="text-down">
          <!-- 地址 -->
          <div class="text-to">{{ addressInfo.address }}</div>
          <!-- 买家 -->
          <div class="seller">
            <!-- 买家名 -->
            <div class="sellname">{{ addressInfo.userName }}</div>
            <!-- 电话 -->
            <div class="sellphome">{{ addressInfo.phone }}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 占位 -->
    <div class="Placeholder"></div>
    <!-- 支付按钮 -->
    <div class="botton" @click="goPaySuccessful">Pay</div>
    <!-- 提示弹窗 -->
    <div v-show="showPopups" class="box300">{{ PromptInfo }}</div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { orderStatus } from "@/stores/payStore";
import { getJWTFun } from "@/hook/jsrsasign";
import {
  getOriginAddressByIdAPI,
  selectAccountByIdAPI,
  payOrderAPI,
} from "@/server/api/cartView";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const router = useRouter();
const route = useRoute();
const addressInfo = ref({});
const amount = ref(0);
const tradeName = ref("");
const fromPerson = ref({});
const orderIdArr = ref([]);
const OrderDetailArr = ref([]);
// 弹出提示是否展示
const showPopups = ref(false);
// 提示内容
const PromptInfo = ref("");
// 余额积分
const pointBalance = ref(0);
// 是否全部支付成功
const isSuccess = ref([]);
let fromAddress = ref([]);
let Separate = ref("");

// 获取地址接口
const Seller = async (commodityId) => {
  const res = await getOriginAddressByIdAPI(commodityId);
  fromPerson.value = res.data;
  fromAddress.value.push(fromPerson.value.data);
  Separate.value = fromAddress.value.join(",");
};

// 根据用户Id查找用户账户表的积分余额和pi币余额接口
const selectAccountById = async (uid) => {
  const res = await selectAccountByIdAPI(uid);
  pointBalance.value = res.data.data.pointBalance;
};

// 支付下单接口
const payOrder = async (payOrderData) => {
  const res = await payOrderAPI(payOrderData);
  console.log(res.data);
  if (res.data.code == 200) {
    isSuccess.value.push(res.data.code);
    if (isSuccess.value.length === orderIdArr.value.length) {
      // 提示支付成功
      PromptInfo.value = "Payment successful";
      showPopups.value = true;
      setTimeout(() => {
        showPopups.value = false;
      }, 2000);
      setTimeout(() => {
        router.push({
          name: "PaySuccessful",
          query: {
            orderIdArr: JSON.stringify(orderIdArr.value),
          },
        });
      }, 2200);
    } else {
      // 弹窗提示积分不足支付
      PromptInfo.value = "There is an order payment error";
      showPopups.value = true;
      setTimeout(() => {
        showPopups.value = false;
      }, 2000);
      setTimeout(() => {
        router.push({
          name: "MeView",
        });
      }, 2200);
    }
  }
};

onMounted(() => {
  console.log("支付订单请求体", orderStatus().itmePayReq);
  addressInfo.value = JSON.parse(route.query.addressInfo);

  amount.value = Number(route.query.amount);
  tradeName.value = route.query.tradeName;
  orderIdArr.value = JSON.parse(route.query.orderIdArr);
  OrderDetailArr.value = JSON.parse(route.query.OrderDetailArr);
  console.log("1", fromAddress.value);
  for (let index = 0; index < OrderDetailArr.value.length; index++) {
    Seller(OrderDetailArr.value[index].commodityId);
  }
});

const goPaySuccessful = async () => {
  await selectAccountById(addressInfo.value.userId);
  if (pointBalance.value < amount.value) {
    // 弹窗提示积分不足支付
    PromptInfo.value = "You don't have enough points";
    showPopups.value = true;
    setTimeout(() => {
      showPopups.value = false;
    }, 2000);
  } else {
    // 调用接口支付
    console.log(OrderDetailArr.value);
    console.log(orderIdArr.value);
    for (let i = 0; i < orderIdArr.value.length; i++) {
      const pay = {
        commodityId: OrderDetailArr.value[i].commodityId,
        number: OrderDetailArr.value[i].number,
        orderId: orderIdArr.value[i],
        transactionAmount: OrderDetailArr.value[i].transactionAmount,
        uid: OrderDetailArr.value[i].uid,
      };
      let token = getJWTFun(pay);
      payOrder(token);
    }
  }
};
</script>

<style lang="scss" scoped>
.pay {
  background-color: rgba(245, 245, 245, 1);
  height: 843rem;
  overflow: hidden;

  .header {
    width: 360rem;
    height: 24rem;
    padding: 56rem 16rem 24rem;
    display: flex;
    align-items: center;

    .left {
      width: 24rem;
      height: 24rem;
      line-height: 34rem;

      img {
        width: 6rem;
        height: 12rem;
      }
    }

    .title {
      height: 28rem;
      margin-left: 90rem;
      font-size: 20rem;
      font-weight: 500;
      line-height: 28rem;
      text-align: center;
      color: rgba(102, 102, 102, 1);
    }
  }

  .price {
    color: rgba(100, 46, 142, 1);
    font-size: 24rem;
    text-align: center;
    margin-top: 86rem;
    margin-bottom: 64rem;

    span {
      font-size: 48rem;
    }
  }

  .product-information {
    background-color: #fff;
    border-radius: 12rem;
    font-size: 16rem;
    padding: 12rem 35rem 10rem 12rem;
    margin: 12rem 16rem 27rem 16rem;

    .name {
      max-width: 309rem;
      max-height: 48rem;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .from {
      font-size: 12rem;
      display: flex;
      margin: 18rem 0;
      align-items: center;

      .text-from {
        font-size: 12rem;
        color: rgba(153, 153, 153, 1);
        margin-left: 29rem;
        max-width: 247rem;
        max-height: 32rem;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      .buyers {
        display: flex;
        font-size: 14rem;

        .buyphome {
          margin-left: 7rem;
          font-weight: 600;
        }
      }
    }

    .to {
      display: flex;
      font-size: 12rem;
      margin: 18rem 0;
      align-items: center;

      .title-to {
        width: 33rem;
        text-align: center;
      }

      .text-down {
        font-size: 12rem;
        color: rgba(153, 153, 153, 1);
        margin-left: 29rem;

        .text-to {
          max-width: 247rem;
          max-height: 32rem;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }

        .seller {
          display: flex;
          font-size: 14rem;

          .sellphome {
            margin-top: 3rem;
            margin-left: 7rem;
            font-weight: 600;
          }
        }
      }
    }
  }

  .botton {
    color: #fff;
    background-color: rgba(100, 46, 142, 1);
    font-size: 20rem;
    margin: 0 16rem;
    border-radius: 8rem;
    position: fixed;
    bottom: 34rem;
    padding: 11rem 162rem;
  }
}

.box300 {
  background-color: rgba(0, 0, 0, 0.7);
  font-size: 16rem;
  border: none;
  width: 360rem;
  height: 50rem;
  border-radius: 99rem;
  position: fixed;
  z-index: 9999;
  bottom: 180rem;
  left: 15rem;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}
</style>
